import { computed } from 'vue'
import { PC_DEVICE_WITH } from '@/constants'
import { useWindowSize} from '@vueuse/core'

const { width } = useWindowSize()

/**
 * 判断当前是否为移动设备，判断依据屏幕宽度是否大于一个指定宽度 （1280）
 */
export const isMobileTerminal = computed(() => {
  return width.value < PC_DEVICE_WITH
})

/**
 * 动态指定 rem 基准值，最大为 40px
 * 根据用户的屏幕宽度进行计算，把计算值赋值给 html 跟标签作为 fontsize 大小
 */
export const useRem = () => {
  // 定义最大的 fontsize
  const MAX_FONT_SIZE = 40
  // 监听 html 文档被解析完成的时间
  document.addEventListener('DOMContentLoaded',() => {
    // 拿到 html 标签
    const html = document.querySelector('html')
    // 计算 fontsize, 根据屏幕宽度 / 10
    let fontSize = window.innerWidth / 10
    fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize
    // 赋值给 html
    html.style.fontSize = fontSize + 'px'
  })
}
